<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        div,
        ul,
        li{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }

        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }

        .top-bar {
            height: 40px;
            background-color: skyblue;
        }

        .container {
            width: 1000px;
            margin: 0 auto;
            background-color: aliceblue;
        }


        .site-header{
            /* border: 1px solid red; */
        }

        .site-header .logo {
            width: 100px;
            height: 120px;
            background-color: pink;
            float: left;
        }

        .site-header .main-nav {
            width: 700px;
            /* border: 1px solid #000; */
            float: right;
        }

        .main-nav .nav-top{
            width: 500px;
            height: 50px;
            background-color: green;
            float: right;
        }

        .main-nav .nav-bottom{
            width: 100%;
            height: 60px;
            margin-top: 10px;
            background-color: orange;
            float: right;
        }

        .main-content{
            /* border: 1px solid #000; */
            margin-top: 10px;
        }

        .main-content .sitbar{
            width: 200px;
            height: 500px;
            background-color: yellow;
            float: left;
        }

        .main-content .content-area{
            width: 520px;
            height: 500px;
            /* background-color: purple; */
            margin-left: 15px;
            float: left;
        }
        .main-content .widget-area{
            width: 250px;
            height: 500px;
            background-color: pink;
            float: right;
        }

        .feature-banner{
            height: 300px;
            background-color: orange;
        }

        .popular-posts{
            height: 180px;
            /* background-color: aqua; */
            margin-top: 15px;
        }

        .popular-posts ul li{
            width: 120px;
            height: 180px;
            background-color: blue;
            float: left;
            margin: 0 5px;

        }

        .site-footer{
            height: 100px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <!-- top-bar start -->
    <div class="top-bar"></div>
    <!-- top-bar end -->

    <div class="container">
        <!-- header start -->
        <header class="site-header clearfix">
            <div class="logo"></div>
            <nav class="main-nav clearfix">
                <div class="nav-top"></div>
                <div class="nav-bottom"></div>
            </nav>
        </header>
        <!-- header end -->

        <!-- main start -->
        <main class="main-content clearfix">
            <div class="content-wrapper">
                <aside class="sitbar"></aside>
                <div class="content-area">
                    <section class="feature-banner"></section>
                    <section class="popular-posts">
                        <ul>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                        </ul>
                    </section>
                </div>
                <aside class="widget-area"></aside>
            </div>
        </main>
        <!-- main end -->
    </div>


    <!-- footer start  -->
    <footer class="site-footer"></footer>
    <!-- footer end  -->


</body>

</html>